<template>
  <div class="page-frame">
    <transition
      :name="
        transitionInfo.useTransition
          ? transitionInfo.loadingTransitionClass
          : 'no-transition'
      "
      mode="out-in"
    >
      <div
        class="page-loading"
        v-if="
          (!routerInfo.keepAlive && routerInfo.isLoading) ||
            (!transitionInfo.isBack && routerInfo.isLoading)
        "
      >
        <loading-1 v-if="routerInfo.loadingType == 'loading'"></loading-1>
      </div>
    </transition>

    <transition
      :name="
        transitionInfo.useTransition
          ? transitionInfo.pageTransitionClass
          : 'no-transition'
      "
    >
      <div class="page-content" v-show="!routerInfo.isLoading">
        <slot></slot>
      </div>
    </transition>
  </div>
</template>

<script>
import loading1 from "../components/loading/loading1.vue";
export default {
  components: {
    loading1
  },
  data() {
    return {};
  },
  props: {},
  mounted() {}
};
</script>

<style scoped>
.page-loading {
  width: 100%;
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  /* transform: translateX(-50%); */
}
</style>
